<template>
  <el-dialog v-dialogDrag :title="dialogTitle" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form v-if="dialogVisible" ref="form" :model="formData" label-width="80px">
      <!--      <el-form-item label="上级菜单" prop="parentId">-->
      <!--        <treeselect-->
      <!--          v-model="formData.parentId"-->
      <!--          :options="orgOptions"-->
      <!--          disabled-->
      <!--          :show-count="false"-->
      <!--          placeholder=""-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="类型名称" prop="typeName">
        <el-input v-model="formData.typeName" readonly size="medium" placeholder />
      </el-form-item>
      <el-col :span="24">
        <el-form-item label="类型编号" prop="typeNum">
          <el-input v-model="formData.typeNum" readonly size="medium" placeholder="" />
        </el-form-item>
      </el-col>
      <el-form-item label="类型顺序" prop="orderNum">
        <el-input-number
          v-model="formData.orderNum"
          style="width: 100%;"
          size="medium"
          disabled
          controls-position="right"
          :min="1"
        />
      </el-form-item>
      <el-col :span="24">
        <el-form-item label="">
          <label slot="label" v-html="`备&emsp;&emsp;注`" />
          <el-input v-model="formData.remark" readonly :rows="3" type="textarea" />
        </el-form-item>
      </el-col>
    </el-form>
  </el-dialog>
</template>

<script>
// 菜单下拉树用的的方法和样式
// import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { detailOrganization, treeOrganization } from '@/api/superviseBaseInfo/typeManage/organizationType'
export default {
  name: 'DetailDialog',
  components: {
    // treeselect
  },
  data() {
    return {
      // 单位类型数组
      orgOptions: [],
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: '',
        parentId: '',
        typeName: '', // 类型名称
        remark: '',
        orderNum: '',
        typeNum: ''
      }
    }
  },
  methods: {
    // 初始化太难看
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.getTree()
      this.getDetailById(id)
    },
    async getTree() {
      const { data } = await treeOrganization()
      this.orgOptions = data
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailOrganization(id)
      this.formData = { ...data }
      if (data.parentId === '0') {
        this.formData.parentId = null
      }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    },
    // 确定
    submitForm() {
      this.dialogVisible = false
    }
  }
}
</script>

